<template>
    <div class="content-box">
        <div class="condition-box">
            <el-form :inline="true" :model="condition" class="demo-form-inline">
                <el-form-item label="用户名">
          <el-input v-model="condition.username" clearable placeholder="请输入姓名" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
          <el-input v-model="condition.phone" clearable placeholder="请输入手机号" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="用户状态">
          <el-select v-model="condition.state" clearable placeholder="请选择用户状态" size="mini">
            <el-option
              v-for="s in states"
              :key="s.value"
              :label="s.text"
              :value="s.value">
            </el-option>
          </el-select>
                </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search" size="mini">查询</el-button>
            <el-button type="default" icon="el-icon-refresh-right"  @click="reset" size="mini">重置</el-button>
            <el-button type="danger" icon="el-icon-circle-plus-outline" @click="showAddDialog" size="mini">新增</el-button>
            </el-form>
        </div>

        <div class="tablef">
            <el-table :data="users" height="400px" border size="mini"  style="width: 100%; text-align: center;">
            <el-table-column prop="username"  label="姓名"></el-table-column>
            <el-table-column prop="sex"  label="性别"></el-table-column>
            <el-table-column prop="age"  label="年龄"></el-table-column>
            <el-table-column prop="phone"  label="手机号码" show-overflow-tooltip></el-table-column>
            <el-table-column prop="state"  label="状态">
                <template scope="scope">
                {{getDict(scope.row.state)}}
                </template>
            </el-table-column>
            <el-table-column label="操作"  width="200"> 
                <template slot-scope="scope">
                    <el-button type="text" size="mini"  @click="editUser(scope.row)">修改信息</el-button>
                    <el-button type="text" size="mini"  @click="deleteUser(scope.row.userid)">删除</el-button>
                    <el-button type="text" size="mini" v-show="scope.row.state === 1" @click="changeUserState(scope.row,0)">冻结</el-button>
                    <el-button type="text" size="mini" v-show="scope.row.state === 0" @click="changeUserState(scope.row,1)">激活</el-button>
                </template>
            </el-table-column>
          </el-table>
        </div>
          <el-pagination small background
                :page-sizes="[5,10,15,20]"
                layout="total,sizes,prev,pager,next"
                :current-page="currentPage"
                :page-size="displayCount"
                :total=total
                @current-change="changeCurrentPage"
                @size-change="changeSize"
                >
        </el-pagination>
        <user-dialog :dialog-data="dialogData"></user-dialog>
        <el-dialog title="修改用户" :visible.sync="updateDatavisible"
                   width="45%" @close="closeDialog">
            <el-form :model="updateData" :rules="userRules" :inline="true" ref="updateDataForm">
                <el-form-item label="密码" prop="password" label-width="80px">
                    <el-input v-model="updateData.password" size="mini" clearable placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="username" label-width="80px">
                    <el-input v-model="updateData.username" size="mini" clearable placeholder="请输入名字"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex" label-width="80px">
                    <el-select v-model="updateData.sex" size="mini" clearable placeholder="请选择性别">
                        <el-option
                                v-for="s in sex"
                                :key="s.value"
                                :label="s.text"
                                :value="s.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年龄" prop="age" label-width="80px">
                    <el-input v-model.number="updateData.age" size="mini" clearable placeholder="请输入年龄"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone" label-width="80px">
                    <el-input v-model="updateData.phone" size="mini" clearable placeholder="请输入手机号码"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog" size="small">取 消</el-button>
                <el-button type="primary" @click="saveUser" size="small">保 存</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import UserDialog from "./add.vue";
import {userSearch ,userDelete,userUpdate} from "../../api/user";
export default {

    name:'User',
    components:{UserDialog},
    data(){
      return{
        condition:{
          phone:'',
          username:'',
          state:1,
          payment:'',
        },
        states:[
          {value:0,text:'冻结'},
          {value:1,text:'使用中'},

        ],
        users:[],
          updateData:{},
            currentPage:1,
            displayCount:5,    
            total:0,
            dialogData:{
              visible:false,
            },
          updateDatavisible:false,
          sex:[
              {value:'男',text:'男'},
              {value:'女',text:'女'},
          ],
          userRules:{
              password: [
                  {required: true, message: '请输入密码', trigger: 'blur'},
                  {min: 6, max: 20, message: '密码长度只能在6-20个字符之间', trigger: 'blur'},
              ],
              username: [
                  {required: true, message: '请输入姓名', trigger: 'blur'},
                  {min: 2, max: 20, message: '姓名长度只能在2-20个字符之间', trigger: 'blur'}
              ],
              sex: [
                  {required: true, message: '请选择性别', trigger: 'blur'}
              ],
              age: [
                  {validator: this.checkAge, trigger: 'blur'}
              ],
              phone: [
                  {required: true, message: '请输入手机号码', trigger: 'blur'},
                  {validator: this.checkPhone, trigger: 'blur'}
              ],
              payment: [
                  {required:true,message:'请选择支付方式',trigger:'blur'}
              ],

          },

      }
    },
    methods:{
      search(){
            userSearch(
                this.currentPage,
              this.displayCount,
              this.condition
                ).then((data)=>{
                   this.users = data.data.list;
                   this.condition.currentPage = data.data.pageNum;
                   this.total = data.data.total ;
                 }) 
        },
        getDict(data){
          if(data==1){
              return '使用中'
          }else {
              return '冻结'
          }
        },
        reset(){
            this.condition ={
                username:'',
                phone:'',
                state:'',
                payment:'',
            }
        },
        showAddDialog(){
          this.dialogData.visible = true ;  
        },
        //当表格的选中发生改变触发
        handlerCelectionChange(){
           
          },
          //当点击编辑按钮触发
          editUser(user){
             this.updateDatavisible = true ;
             this.updateData={...user};
          },
        saveUser(){
            userUpdate(
                this.updateData
            ).then((res)=>{
                if(res.msg =='OK'){this.$message.success('修改成功');
                    this.search();
                    this.updateDatavisible = false;
                }
                else {this.$message.error(res.msg)}

            })
        },
          //删除用户
          deleteUser(userid){
            let flag = confirm("确定删除?");
            userid=userid.toString()
           if(flag){
            userDelete(userid).then((data)=>{
                if(data.data == null){
                    this.$message({
                        message:'有订单正在进行，删除失败！',
                        type:'error'
                    })
                    this.search();
                }
                else {
                    this.$message.success('删除成功！')
                    this.search();
                }
            })
           }
            
        },
          //修改用户状态
          changeUserState(user,state){
              let flag = confirm("确定修改用户状态?");
              console.log(user)
              if(flag) {
                  userUpdate(
                      user,
                      user.state=state
                  ).then((res) => {
                      console.log(res)
                      if (res.data !== null) {
                          this.$message.success('操作成功！')
                          this.search();
                      } else {
                          this.$message.error('操作失败！')
                      }
                  })
              }
  
          },
           //当前页码改变触发
        changeCurrentPage(val){
           this.currentPage = val ; 
           this.search(); 
        },
        //每页展示的记录数发生改变
        changeSize(val){
            this.displayCount = val ;
            this.search();
        },
        closeDialog: function () {
            this.updateDatavisible = false;
        },
        checkAge: function (rule, value, callback) {
            if(value === '') {
                callback();
                return;
            }
            if(!Number.isInteger(value)){//不是数字
                callback(new Error("年龄必须是整数"))
            } else {
                if(value < 18){
                    callback(new Error("年龄必须满18周岁"))
                } else {
                    callback();
                }
            }
        },
        checkPhone: function (rule, value, callback) {
            let regex = /1[3-9][0-9]{9}/;
            if(regex.test(value)){
                callback()
            } else {
                callback(new Error("手机号码格式不正确"))
            }
        },
       
    },
    mounted(){
        this.search();
    }
}
</script>

<style>
    .content-box{
        width: calc(100% - 10px);
        height: 100%;
    }
    .condition-box, .button-box{
        height: 40px;
        line-height: 40px;
        color: #909399;
        font-size: 12px;
        margin: 10px;
    }
    .tablef {
        flex: 8.25;
        border-radius: 0px;
        box-shadow: rgba(0, 0, 0, 0.047) 0px 3px 5px;
    }
    .condition-box{
        color: #909399;
        font-size: 12px;
    }
    .el-pagination{
        height: 30px;
        padding-top: 10px;
    }
    .el-input, .el-select{
        width: 120px;
        margin-right: 10px;
    }
    .el-pagination .el-select .el-input > input{
        height: 22px;
    }

    .el-pagination > span{
        float: left;
    }
</style>